
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Brunch - Contact Page</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/fontAwesome.css">
        <link rel="stylesheet" href="css/hero-slider.css">
        <link rel="stylesheet" href="css/owl-carousel.css">
        <link rel="stylesheet" href="css/datepicker.css">
        <link rel="stylesheet" href="css/tooplate-style.css">

        <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">

        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    </head>
<!--
Tooplate 2112 Brunch
https://www.tooplate.com/view/2112-brunch
-->
<body>
 
    <div class="wrap inner-header">
        <header id="header">
            <div class="container-fluid">
                <div class="col-md-12">
                    <button id="primary-nav-button" type="button">Menu</button>
                    <div class="logo">
                        <a href="index.html"><img src="img/white-logo.png" alt="Brunch Template"></a>
                    </div>
                    <nav id="primary-nav" class="dropdown cf">
                        <ul class="dropdown menu">
                            <li class='active'><a href="index.html">Main Features</a></li>
                            <li><a href="#">Products</a>
                                <ul class="sub-menu">
                                    <li><a href="generic-page.html">Latest Products</a></li>
                                    <li><a href="generic-page.html">New Arrivals</a></li>
                                    <li><a href="generic-page.html">Top Rated 2019</a></li>
                                    <li><a href="generic-page.html">Recommended</a></li>
                                </ul>
                            </li>
                            <li><a href="generic-page.html">Shop</a></li>
                            <li><a href="contact-page.html">Contact Us</a></li>
                        </ul>
                    </nav><!-- / #primary-nav -->
                </div>
            </div>
        </header>
    </div>


    <div class="heading-page">
        <div class="container">
            <div class="col-md-12">
                <h2>Contact Us</h2>
                <div class="line-dec"></div>
            </div>
        </div>
    </div>


    <div class="contact-intro">
        <div class="container">
            <div class="col-md-12">
                <h2 class="hidden-sm hidden-xs">Vivamus faucibus aliquam <br>massa id malesuada</h2>
                <h2 class="hidden-lg hidden-md">Vivamus faucibus aliquam massa id malesuada</h2>
                <span>Humblebrag banjo man braid leggings tote bag.</span>
                <p>Cras sit amet tortor vitae justo suscipit accumsan. Ut vel nulla bibendum dolor porttitor convallis vel ac tellus. Aliquam lacinia in mi sit amet ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eget maximus magna. </p>
                <br><p>Ut facilisis lorem in nisl viverra, non rhoncus elit commodo. Duis id porta enim. Vivamus at lacus eget ligula pharetra sodales sit amet ac arcu. Vivamus luctus sem nec tortor blandit, tempor blandit odio lobortis. Quisque vehicula tellus vitae maximus accumsan. Sed id mi id quam interdum tincidunt. Suspendisse faucibus turpis id feugiat commodo.</p>
                <div class="blue-border-button">
                    <a href="#">View More</a>
                </div>
            </div>
        </div>
    </div>


    <div class="contact-form">
        <div class="container-fluid">
            <div class="col-md-4">
                <div class="text-content">
                    <div class="inside-content">
                        <h4>Sed eget interdum turpis. Donec eleifend auctor ligula vel bibendum. Donec placerat ante enim.</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="right-content">
                    <div id="contact">
                    <form action="#" method="post">
                        <div class="col-md-4 col-md-offset-2">
                            <fieldset>
                                <input name="name" type="text" class="form-control" id="name" placeholder="Your name..." required="">
                            </fieldset>
                        </div>
                        <div class="col-md-4">
                            <fieldset>
                                <input name="email" type="text" class="form-control" id="email" placeholder="Email..." required="">
                            </fieldset>
                        </div>
                        <div class="col-md-8 col-md-offset-2">
                            <fieldset>
                                <textarea name="message" rows="6" class="form-control" id="message" placeholder="Your message..." required=""></textarea>
                          </fieldset>
                        </div>
                        <div class="col-md-8 col-md-offset-2">
                            <fieldset>
                                <button type="submit" id="form-submit" class="btn">Send Message</button>
                            </fieldset>
                        </div> 
                    </form>
                    </div>                
                </div>
            </div>
            <div class="col-md-12">
                <div id="map">
                	<!-- How to change your own map point
                           1. Go to Google Maps
                           2. Click on your location point
                           3. Click "Share" and choose "Embed map" tab
                           4. Copy only URL and paste it within the src="" field below
                    -->
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1197183.8373802372!2d-1.9415093691103689!3d6.781986417238027!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdb96f349e85efd%3A0xb8d1e0b88af1f0f5!2sKumasi+Central+Market!5e0!3m2!1sen!2sth!4v1532967884907" width="100%" height="450px" frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>
            </div>
        </div>  
    </div>


    <div class="subscribe-form">
        <div class="container">
            <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                <form action="#" method="get">
                <h4>Cras pellentesque suscipit nulla, sit amet luctus purus. Donec non erat eros.</h4>
                <fieldset>
                    <input name="email" type="text" id="email" 
                    onfocus="if(this.value == 'Your Email...') { this.value = ''; }" 
                    onBlur="if(this.value == '') { this.value = 'Your Email...';}"
                    value="Your Email..." required="" />
          		</fieldset>
                <fieldset>
                    <button type="submit" id="form-submit" class="btn">Subscribe Now!</button>
                </fieldset>
            </form>
            </div>
        </div>
    </div>


    <footer>
        <div class="container">
            <div class="col-md-2 col-sm-6">
                <div class="footer-item">
                    <h2>Latest Products</h2>
                    <ul>
                        <li><a href="#">-  Microdosing</a></li>
                        <li><a href="#">-  Dreamcatcher</a></li>
                        <li><a href="#">-  Chambray irony</a></li>
                        <li><a href="#">-  Bitters leggings</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-2 col-sm-6">
                <div class="footer-item">
                    <h2>New Arrivals</h2>
                    <ul>
                        <li><a href="#">-  Park brunch</a></li>
                        <li><a href="#">-  Shoreditch</a></li>
                        <li><a href="#">-  Activated</a></li>
                        <li><a href="#">-  Charcoales</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-2 col-sm-6">
                <div class="footer-item">
                    <h2>Top Rated 2018</h2>
                    <ul>
                        <li><a href="#">-  Messenger</a></li>
                        <li><a href="#">-  Selvage</a></li>
                        <li><a href="#">-  Chartreuse</a></li>
                        <li><a href="#">-  Bushwick</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-2 col-sm-6">
                <div class="footer-item">
                    <h2>Recommended</h2>
                    <ul>
                        <li><a href="#">-  Coloring</a></li>
                        <li><a href="#">-  Pinterest</a></li>
                        <li><a href="#">-  Mumblecore</a></li>
                        <li><a href="#">-  Mustache</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-4 col-sm-12">
                <div class="footer-item">
                    <h2>More About Us</h2>
                    <p>Duis tristique, erat id tempus viverra, quam ante tempus massa, id pulvinar nisi lorem at metus. Aenean posuere risus tristique.</p>
                    <ul class="social-icons">
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-rss"></i></a></li>
                        <li><a href="#"><i class="fa fa-behance"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>


    <div class="sub-footer">
        <div class="container">
            <div class="col-md-12">
                <p>Copyright &copy; 2018 Company Name 
                
                - Design: <a rel="nofollow" href="https://www.facebook.com/tooplate">Tooplate</a></p>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

    <script src="js/vendor/bootstrap.min.js"></script>
    
    <script src="js/datepicker.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    
</body>
</html>